<template>
    <div class="ranking">
        <h2 class="home-title">{{ title }}</h2>
        <ul>
            <li v-for="item in items" :key="item.id">
                <b>
                    <router-link :to="{path:'/article/' + item.id, params:{id: item.id}}">
                        {{ item.title }}
                    </router-link>
                </b>
                <p>
                    <i v-if="item.thumb_image">
                        <router-link :to="{path:'/article/' + item.id, params:{id: item.id}}">
                            <img :src="item.thumb_image"/>
                        </router-link>
                    </i>
                    {{ item.excerpt }}
                </p>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        props: {
            title: String,
            items: {
                type: [Array, Object],
                default: [],
            }
        },
        name: "Right"
    }
</script>

<style lang="scss" scoped>
    .ranking {
        background: #FFF;
        overflow: hidden;
        margin-bottom: 20px;
        ul {
            padding: 10px;
            li {
                border-bottom: solid 1px #EAEAEA;
                font-size: 14px;
                margin-bottom: 10px;
                padding-bottom: 10px;
                overflow: hidden;
                b {
                    height: 30px;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    display: block;
                }
                p {
                    line-height: 24px;
                    color: #888;
                    i {
                        width: 100px;
                        height: 90px;
                        overflow: hidden;
                        display: block;
                        float: left;
                        margin-right: 10px;
                        a img {
                            height: 100%;
                            margin: auto;
                            -moz-transition: all .5s ease;
                            -webkit-transition: all .5s ease;
                            transition: all .5s ease;
                        }
                    }
                }
                a:hover {
                    color: #000;
                }
            }

            li:hover {
                p {
                    color: #000;
                }
                b {
                    a {
                        color: #000;
                    }
                }

                i img {
                    transform: scale(1.1)
                }
            }
        }
    }
</style>